<template>
  <header class="header">
    <div class="header-center">
      <div class="header-title">OA辦公後台管理系統</div>
      <div class="header-content">
        <!-- 左側導航菜單 -->
        <div class="header-left">
          <el-menu mode="horizontal" :ellipsis="false" background-color="#1a75ff" text-color="#fff"
            active-text-color="#fff" :unique-opened="true" :default-active="activeTopNav">
            <el-menu-item index="home" class="menu-item-with-icon" @click="switchTopNav('home')">
              <div class="menu-item-content">
                <el-icon class="menu-icon">
                  <HomeFilled />
                </el-icon>
                <span class="menu-text">首頁</span>
              </div>
            </el-menu-item>

            <el-dropdown placement="bottom-start" trigger="hover" class="apps-dropdown">
              <el-menu-item index="apps" class="menu-item-with-icon">
                <div class="menu-item-content">
                  <el-icon class="menu-icon">
                    <Grid />
                  </el-icon>
                  <span class="menu-text">菜單</span>
                </div>
              </el-menu-item>
              <template #dropdown>
                <div class="apps-dropdown-panel">
                  <div class="panel-content">
                    <div class="app-item" v-for="app in apps" :key="app.id" @click="navigateTo(app.index, app.name)">
                      <el-icon class="app-icon" :size="28" :color="app.color">
                        <component :is="app.icon" />
                      </el-icon>
                      <span class="app-name">{{ app.name }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-dropdown>
          </el-menu>
        </div>

        <!-- 右側用戶區域 -->
        <div class="header-right">
          <el-badge :value="3" class="message-badge">
            <el-icon :size="20" color="#fff">
              <Message />
            </el-icon>
          </el-badge>

          <el-dropdown trigger="hover">
            <div class="user-info">
              <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <span class="user-name">管理員</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon>
                    <User />
                  </el-icon>重置密碼
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-icon>
                    <SwitchButton />
                  </el-icon>退出登錄
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useNavigationStore } from "@/store/index";
import { storeToRefs } from "pinia";
import {
  HomeFilled,
  Grid,
  Message,
  User,
  SwitchButton,
  OfficeBuilding,
  User as UserIcon,
  Clock,
  Setting,
  Money,
  Document as DocumentIcon,
  Finished,
  Van,
  Bell,
  Box,
  Notebook,
  Reading,
  TrendCharts,
  Collection,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const navigationStore = useNavigationStore();
const { activeTopNav } = storeToRefs(navigationStore);

const apps = [
  {
    id: 1,
    name: "組織",
    icon: OfficeBuilding,
    route: "/organization",
    color: "#FF6B6B",
    index: "organization",
  },
  {
    id: 2,
    name: "員工",
    icon: UserIcon,
    route: "/performance",
    color: "#4ECDC4",
    index: "performance",
  },
  {
    id: 3,
    name: "考勤",
    icon: Clock,
    // 點擊菜單默認跳轉的頁面
    route: "/Attendance",
    color: "#45B7D1",
    // 菜單索引
    index: "Attendance",
  },
  {
    id: 4,
    name: "薪酬",
    icon: Money,
    route: "/training",
    color: "#A37EBA",
    index: "organization",
  },
  {
    id: 5,
    name: "社保公積金",
    icon: DocumentIcon,
    route: "/attendance",
    color: "#F9A03F",
    index: "organization",
  },
  {
    id: 6,
    name: "績效",
    icon: TrendCharts,
    route: "/salary",
    color: "#FFD166",
    index: "organization",
  },
  {
    id: 7,
    name: "招聘",
    icon: Finished,
    route: "/social",
    color: "#06D6A0",
    index: "organization",
  },
  {
    id: 8,
    name: "審批",
    icon: Reading,
    route: "/approval",
    color: "#118AB2",
    index: "organization",
  },
  {
    id: 9,
    name: "會議室預定",
    icon: OfficeBuilding,
    route: "/recruitment",
    color: "#EF476F",
    index: "organization",
  },
  {
    id: 10,
    name: "車輛",
    icon: Van,
    route: "/vehicle",
    color: "#7DCEA0",
    index: "organization",
  },
  {
    id: 11,
    name: "新聞",
    icon: Collection,
    route: "/announcement",
    color: "#FF9F1C",
    index: "organization",
  },
  {
    id: 12,
    name: "公告",
    icon: Bell,
    route: "/assets",
    color: "#2EC4B6",
    index: "organization",
  },
  {
    id: 13,
    name: "合同庫",
    icon: DocumentIcon,
    route: "/settings",
    color: "#5F6CAF",
    index: "organization",
  },
  {
    id: 14,
    name: "文檔庫",
    icon: Box,
    route: "/documents",
    color: "#6A4C93",
    index: "organization",
  },
  {
    id: 15,
    name: "資產",
    icon: Box,
    route: "/calendar",
    color: "#FF9F1C",
    index: "organization",
  },
  {
    id: 16,
    name: "培訓",
    icon: Notebook,
    route: "/trainProgramMan",
    color: "#06D6A0",
    index: "training",
  },
  {
    id: 17,
    name: "系統設置",
    icon: Setting,
    route: "/setting",
    color: "#A37EBA",
    index: "setting",
  },
];

//点击跳转到首页 workbench路由
const switchTopNav = (nav) => {
  navigationStore.setActiveTopNav(nav);
  if (nav === "home") {
    router.push("/workbench");
  }
};

const navigateTo = (index, name) => {
  ElMessage.success(`切換到${name}菜單`);
  navigationStore.setActiveTopNav(index);
};
</script>

<style lang="less" scoped>
.header {
  height: 4rem;
  width: 100%;
  background-color: #1a75ff;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);

  .header-center {
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    height: 100%;

    .header-title {
      font-weight: bold;
      color: #fff;
      font-size: 1.4rem;
      margin-right: 3rem;
      white-space: nowrap;
    }

    .header-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      // 左側菜單
      .header-left {
        :deep(.el-menu) {
          border-bottom: none;
          height: 4rem;

          .el-menu-item {
            height: 4rem;
            padding: 0 1.25rem !important;

            &.menu-item-with-icon {
              display: flex;
              align-items: center;

              .menu-item-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .menu-icon {
                  margin: 0;
                  font-size: 2rem;
                }

                .menu-text {
                  font-size: 0.85rem;
                  line-height: 1;
                }
              }
            }

            &:hover {
              background-color: rgba(255, 255, 255, 0.1) !important;
            }
          }
        }

        .apps-dropdown {
          :deep(.el-tooltip__trigger) {
            outline: none;
          }
        }
      }

      // 右側用戶區域
      .header-right {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        .message-badge {
          cursor: pointer;
          display: flex;
          align-items: center;

          :deep(.el-badge__content) {
            border: none;
          }
        }

        .user-info {
          display: flex;
          align-items: center;
          gap: 0.625rem;
          cursor: pointer;
          padding: 0.25rem 0.5rem;
          border-radius: 0.25rem;
          transition: background-color 0.3s;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }

          .user-name {
            color: #fff;
            font-size: 0.95rem;
          }
        }
      }
    }
  }
}

.apps-dropdown-panel {
  width: 25rem;
  padding: 1rem;
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);

  .panel-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem;
    padding: 0.75rem;

    .app-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.5rem 0rem;
      border-radius: 0.25rem;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: #f5f7fa;
      }

      .app-icon {
        margin-bottom: 0.5rem;
      }

      .app-name {
        font-size: 0.75rem;
        color: #666;
      }
    }
  }
}
</style>
